<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>

  <div id="box"></div>

  <script>
    // 需求：我爱我家     我   高亮
    // 原理：将 我 替换成  <span style="color: red">我</span>

    // let str = '我爱我家'
    // document.querySelector('#box').innerHTML = str
    // document.querySelector('#box').innerHTML = '<span style="color: red">我</span>爱我家'

    // 字符串 replace方法 替换

    // 把a替换成x
    //  第一个参数是 替换谁   字符串 'a'   还可以写成正则表达式   g 全局匹配搜索   i 忽略大小写
    //  第二个参数是 替换成啥  字符串      还可以写回调函数，其中回调的返回值就是替换后的结果(替换成啥)
    //                                  形参item 就是每次匹配到的要替换的内容
    // console.log('abc'.replace('a', 'x'))

    // console.log('abcabc'.replace('a', 'x'))
    // console.log('abcabcABC'.replace(/a/gi, 'x'))


    // 需求 ：abcabc 其中的c转大写
    // console.log('abcabc'.toUpperCase()) // 所有大写
    // console.log('abcabc'.replace(/c/gi, 'C'))

    // 需求 ：abcabc 其中的 a 和 c转大写
    // console.log('abcabc'.replace(/a|c/gi, 'A'))


    /* let res = 'abcabc'.replace(/a|c/gi, function (item) {
      console.log(item) // 形参item 就是匹配到的要替换的内容  a c a c

      // 回调函数的返回值即可决定替换成啥
      return item.toUpperCase()
    })
    console.log(res) */


    // 字符串的replace方法
    //  replace(替换谁, 替换成啥)
    //  替换谁 ==> 'a'   还可以写 正则  /a/gi
    //  替换成啥 ==> 'c'  还可以写回调函数   回调函数 形参  +  返回值


    // let str = '我爱我家'
    // document.querySelector('#box').innerHTML = str.replace(/我/g, item => '<span style="color: red">我</span>')


    // 封装高亮效果

    // 参数str：需要处理的字符串
    // 参数keyword： 字符串中需要高亮的部分
    function highLight(str, keyword) {
      // /我/  要匹配我
      // / keyword/  要匹配 keyword

      // 把替换后的高亮效果给返回出去

      // 有问题  /keyword/
      // return str.replace(/keyword/gi, item => `<span style="color: red">${keyword}</span>`)


      // 使用构造函数RegExp来创建正则表达式
      return str.replace(new RegExp(keyword, 'gi'), item => `<span style="color: red">${keyword}</span>`)
    }

    console.log(highLight('abc', 'a'))
    console.log(highLight('abc', 'b'))

    // 正则的创建 形式
    //  构造函数  RegExp     new RegExp()     /a/  等价于  new RegExp(/a/)  new RegExp('a')
    //         new RegExp('a', 'gi')
    //  字面量   /a/
  </script>
</body>

</html>